import React from 'react'
import { Form ,Row,Col,Space,Input,Button} from 'antd'

interface inProps {
  /** 可包含子元素 */
  children: any
  /** 点击搜索按钮事件回调 */
  tap: any
  /** 展示样式 */
  sl: number
  /** 需要展示的其它功能按钮(第一行显示) */
  btns: any
  /** 需要展示的其它功能按钮(第二行显示) */
  btns2: any
  /** 主功能按钮显示文字 */
  btnTitle: string
  /** 主功能按钮事件回调 */
  open: any
  /** 搜索栏默认参数 */
  defaultVal: any
}

import { useEffect } from 'react'
const SearchX = ({ children, tap, sl, btns,btns2, btnTitle, open, defaultVal }:inProps) => {
  const [form]:any = Form.useForm()
  // 点击搜索
  const onFinish = (val:any) => {
    // if ((val.date ?? '') !== '') {
    //   const [sd, ed] = val.date
    //   let dates = []
    //   dates[0] = moment(sd).format('YYYY-MM-DD HH:mm:ss')
    //   dates[1] = moment(ed).format('YYYY-MM-DD HH:mm:ss')
    //   val.date = dates
    // }
    // val.payTypeVal = payTypeVal
    // val.orderStatus = orderStatus
    // console.log('搜索的内容', val)
    tap(val)
  }
  console.log('btns', btns)
  const reset = () => {
    form.resetFields()
    defaultVal && form.setFieldsValue({ ...defaultVal })
  }
  useEffect(() => {
    defaultVal && form.setFieldsValue({ ...defaultVal })
  }, [])
  return (<>
    <Form form={form} name='search' colon={false} onFinish={onFinish} className='searchFrom' >
      <Row gutter={16}>
        <Col flex='auto'>
          <Row gutter={16}>
            <Col>
              <Form.Item name={'keyword'} label='关键字搜索'>
                <Input placeholder='请输入你需要搜索的内容' style={{ width: '216px' }} />
              </Form.Item>
            </Col>
            {children}
            {
              sl === 1 &&
              <>
                <Col>
                  <Space>
                    <Button type={'primary'} htmlType={'submit'} ghost className='searchBtn'>搜索</Button>
                    <Button onClick={reset} className='searchReset'>重置</Button>
                  </Space>
                </Col>
              </>
            }
          </Row>
        </Col>
        <Row gutter={16}>
          {btns}
        </Row>
        {
          btnTitle &&
          <Col flex='100px'>
            <Space >
              <Button type={'primary'} onClick={() => { open() }}>{btnTitle}</Button>
            </Space>
          </Col>
        }


      </Row>


      {
        sl === 2 &&
        <div>
          <Space>
            <Button type={'primary'} htmlType={'submit'} ghost>搜索</Button>
            <Button onClick={() => { form.resetFields() }}>重置</Button>
          </Space>
          {btns2}
        </div>
      }
    </Form>

  </>);
}
SearchX.defaultProps = {
  sl: 1,
}

export default SearchX;